import { observer } from "mobx-react";
import { WeaSelect, WeaLocaleProvider, WeaCheckbox } from 'ecCom';
import { toJS } from 'mobx';
import { Button } from 'antd';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class DownloadCondition extends React.Component {
    componentDidMount() {
        const { store } = this.props;
        store.relatedLayout = this.container;
    }
    render() {
        const { store } = this.props;
        const { fieldOptions, nativeFields, conditionList, relatedLayout, name } = store;
        return (
            <div className="edc-ds-condition" ref={ref => this.container = ref}>
                <div className="edc-ds-condition-header">{getLabel('508445', '导出设置')}</div>

                <div className="edc-ds-condition-content1">
                    <div className="ant-col-12 text-elli" title={getLabel('508441', '导出附件')}>
                        {getLabel('508441', '导出附件')}{name}
                    </div>
                    <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@0saabw`}
                        value={store.excelStore.isdownload}
                        display="switch"
                        id='test'
                        onChange={store.excelStore.updateIsDownloadField}
                        style={{ display: 'inline' }}
                    />

                    <div className="ant-col-12 text-elli" title={getLabel('508446', '文件夹名称')}>
                        {getLabel('508446', '文件夹名称')}{name}
                    </div>
                    {relatedLayout && <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@estouq`}
                        layout={relatedLayout}
                        value={store.excelStore.fieldgroup}
                        onChange={(value, key, h) => this.updateDownloadCondition(value, key, h)}
                        options={fieldOptions.slice()}
                        style={{ width: 100, marginRight: 10 }}
                    />}

                    {store.hasDetailFlag && <div className="ant-col-12 text-elli" title={getLabel('515705', '导出明细表')}>
                        {getLabel('515705', '导出明细表')}
                    </div>}
                    {store.hasDetailFlag && relatedLayout && <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@exdswx`}
                        multiple
                        layout={relatedLayout}
                        value={store.detailGroup}
                        onChange={value=>store.detailGroup=value}
                        options={store.detailOptions}
                        style={{ width:100,marginTop: 10,lineHeight: 'normal' }}
                    />}

                </div>

                <div className="edc-ds-condition-setting-opt">

                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@t8dgnc`} type="small" onClick={this.hide}>{getLabel('31129', '取消')}</Button>
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@6t6td9`} type="small" onClick={store.excelStore.saveDownloadCondition}>{getLabel('502312', '保存')}</Button>
                </div>
            </div>
        )

    }
    updateDownloadCondition = (value) => {
        const { store } = this.props;
        store.excelStore.updateDownloadCondition(value)
    }

    hide = () => {
        const { store } = this.props;
        store.downloadPopverVisible = false;
    }
}